/* ===  css des composants du site         === */


/* *****************  titres sous titres    Balises h1 h2 h3 h4 en 2 lignes centrées etc     **********************************************/

/* === titres.css === */
/* Base pour les titres (la couleur sera gérée par w3-text-theme dans le HTML) */

h1, h2, h3, h4 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.3;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5em; font-weight: bold; }
h2 { font-size: 2em; font-weight: bold; }
h3 { font-size: 1.5em; font-weight: bold; }
h4 { font-size: 1.2em; font-weight: bold; }

/* 1. Deux parties sur la même ligne (aligné à gauche par défaut) */
/* La 1ère partie est normale, la 2ème partie est réduite de 20% (0.8em) et plus claire */
.titre-partie-2 {
    font-size: 0.8em; 
    font-weight: lighter; 
}

/* 2. Titre sur 2 lignes */
/* Force le passage à la ligne. En haut normal, en dessous réduit de 20% */
.titre-ligne-2 {
    display: block; 
    font-size: 0.8em; 
    font-weight: normal; 
    margin-top: 5px;
}

/* 3. Titre sur 2 lignes centré au milieu de la page */
/* On ajoute juste le centrage du texte, la 2ème ligne hérite du bloc au-dessus avec un gras plus léger */
.titre-centre {
    text-align: center;
}
.titre-centre .titre-ligne-2 {
    font-weight: lighter; /* Spécifique au centré : font weight plus clair */
}






/* *****************      LiensUtiles       **********************************************/
/* === LiensUtiles.css === */

/* Conteneur principal */
.liens-utiles {
    line-height: 1.5; /* modifier line-height: 2.2; Espace moyen/minimal entre les lignes si retour à la ligne */
    padding: 15px 5px;
    box-sizing: border-box;
}

/* Option 1 : Centré */
.liens-utiles-center {
    text-align: center;
}

/* Option 2 : Normal à gauche */
.liens-utiles-left {
    text-align: left;
}

/* Les hyperliens */
.liens-utiles a {
    display: inline-block; /* Permet de gérer proprement les marges */
    text-decoration: none; /* Pas de soulignement par défaut */
    margin: 0 4px; /* Petit espace avant/après le lien */
    transition: color 0.2s ease, text-decoration 0.2s ease;
    font-weight: 500;
}

/* Animation au survol (soulignement) */
.liens-utiles a:hover {
    text-decoration: underline;
    text-underline-offset: 3px; /* Légère distance du trait de soulignement */
}

/* Icône loupe avant le lien */
.liens-utiles a i {
    margin-right: 5px; /* Espace entre la loupe et le texte */
    font-size: 0.9em; /* Légèrement plus petit que le texte */
    opacity: 0.8;
}

/* Séparateur Pipe (|) */
.liens-utiles .pipe {
    color: #888; /* Couleur neutre pour le séparateur */
    margin: 0 6px; /* Espace de chaque côté du pipe */
    user-select: none; /* Non sélectionnable pour le copier-coller */
}



/* *****************     Photos images       **********************************************/

/* === Images.css === */

/* Conteneur de l'image (hyperlien) */
.img-card {
    display: block;
    position: relative;
    overflow: hidden; /* Masque les bords de l'image pour le zoom et les bords arrondis */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Shadow minimal tout le tour */
    margin: 10px; /* Marge réduite autour de l'image */
    background-color: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

/* Au survol du conteneur, on augmente légèrement l'ombre pour le relief */
.img-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px); /* Léger soulèvement */
}

/* L'image elle-même */
.img-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease; /* Animation de zoom fluide */
}

/* Léger zoom au passage de la souris */
.img-card:hover img {
    transform: scale(1.08); /* Zoom de 8% */
}

/* Légende de l'image (cachée par défaut) */
.img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* Dégradé pour la lisibilité */
    color: #fff;
    padding: 25px 15px 10px 15px; /* Plus de padding en haut pour le dégradé */
    font-size: 1em;
    font-weight: 500;
    opacity: 0; /* Invisible par défaut */
    transform: translateY(100%); /* Cachée en bas */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* La légende ne gêne pas le clic sur le lien */
}

/* Apparition de la légende au survol */
.img-card:hover .img-caption {
    opacity: 1;
    transform: translateY(0); /* Remonte à sa position */
}



/* *****************     Accordions  list dl ol ul    **********************************************/
/* === accordion.css === */

/* Groupe d'accordéons */
.accordion-group {
    max-width: 800px;
    margin: 0 auto;
}

/* Séparation verticale et ombre entre chaque accordéon */
.accordion-item {
    margin-bottom: 15px; /* Espace vertical (séparation) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Ombre */
    border-radius: 4px;
    overflow: hidden; /* Pour garder les angles arrondis */
    background-color: #fff;
}

/* En-tête de l'accordéon (cliquable) */
.accordion-header {
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: filter 0.3s ease; /* Animation de couleur au survol/ouverture */
}

/* Assombrir légèrement l'en-tête quand actif (marche avec toutes les couleurs de thème) */
.accordion-item.active .accordion-header {
    filter: brightness(0.9);
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

/* Icône de la flèche (animée) */
.accordion-icon {
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
    transform: rotate(90deg); /* La flèche tourne quand l'accordéon s'ouvre */
}

/* Contenu de l'accordéon (caché par défaut, animé) */
.accordion-content {
    max-height: 0; /* Fermé au chargement */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 20px; /* Padding horizontal seulement au début */
    background-color: #fff;
}

/* Quand l'accordéon est ouvert */
.accordion-item.active .accordion-content {
    max-height: 1000px; /* Hauteur max suffisante pour le contenu */
    padding: 20px; /* Padding complet */
}

/* === Styles pour les listes (dl, dt, dd, ul, ol, blockquote) === */

/* Listes de définition */
dl {
    margin: 0;
}

/* Terme de définition (dt) */
dt {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 5px;
}
dt:first-child {
    margin-top: 0; /* Pas de marge en haut pour le premier dt */
}

/* Description (dd) - Décalé à droite avec bordure fine à gauche */
dd {
    margin-left: 20px; /* Décalage à droite */
    padding: 10px 15px; /* Espacement interne */
    border-left: 3px solid #ccc; /* Bordure fine à gauche */
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

/* Listes ul et ol à l'intérieur de dd */
dd ul, dd ol {
    margin-left: 15px; /* Légère marge à gauche pour l'aspect visuel */
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
dd li {
    margin-bottom: 5px;
}

/* Citation (blockquote) */
blockquote {
    margin: 15px 0;
    padding: 15px 20px;
    background-color: #f4f4f4;
    border-left: 5px solid #ccc; /* Sera colorisé par w3-border-theme dans le HTML */
    font-style: italic;
    color: #555;
}
blockquote footer {
    font-size: 0.9em;
    text-align: right;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
}


/* *****************  / fin   Accordions  list dl ol ul    **********************************************/